<template>
  <view class="slide-verify-container" v-if="show">
    <view class="mask" @click="close"></view>
    <view class="verify-box">
      <view class="verify-header">
        <text>请完成安全验证</text>
        <uni-icons type="closeempty" size="24" @click="close"></uni-icons>
      </view>
      
      <view class="verify-body">
        <view class="slider-container" ref="sliderContainer">
          <view class="slider-bg" :style="{width: progressWidth}"></view>
          <view 
            class="slider-btn" 
            @touchstart="onTouchStart"
            @touchmove="onTouchMove"
            @touchend="onTouchEnd"
            :style="{left: btnLeft + 'px'}"
          >
            <uni-icons type="right" size="20" color="#fff"></uni-icons>
          </view>
          <text class="slider-text" :style="{opacity: showText ? 1 : 0}">
            向右滑动完成验证
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      btnLeft: 0,
      maxLeft: 0,
      startX: 0,
      isMoving: false,
      showText: true,
      verified: false,
      progressWidth: '0px'
    }
  },
  mounted() {
    this.initSlider();
  },
  methods: {
    initSlider() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('.slider-container').boundingClientRect(data => {
          if (data) {
            this.maxLeft = data.width - 50;
          }
        }).exec();
      });
    },
    onTouchStart(e) {
      this.startX = e.touches[0].clientX;
      this.isMoving = true;
      this.showText = false;
    },
    onTouchMove(e) {
      if (!this.isMoving) return;
      
      const moveX = e.touches[0].clientX - this.startX;
      if (moveX > 0 && moveX <= this.maxLeft) {
        this.btnLeft = moveX;
        this.progressWidth = `${moveX}px`;
      }
    },
    onTouchEnd() {
      this.isMoving = false;
      
      if (this.btnLeft >= this.maxLeft * 0.9) {
        this.verified = true;
        this.$emit('success');
        this.close();
      } else {
        this.btnLeft = 0;
        this.progressWidth = '0px';
        this.showText = true;
      }
    },
    close() {
      this.$emit('update:show', false);
      if (!this.verified) {
        this.btnLeft = 0;
        this.progressWidth = '0px';
        this.showText = true;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.slide-verify-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
  }
  
  .verify-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    background: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    
    .verify-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1px solid #eee;
      
      text {
        font-size: 32rpx;
        font-weight: bold;
      }
    }
    
    .verify-body {
      padding: 40rpx;
      
      .slider-container {
        position: relative;
        height: 80rpx;
        background: #f5f5f5;
        border-radius: 40rpx;
        
        .slider-bg {
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          background: linear-gradient(to right, #6a11cb, #2575fc);
          border-radius: 40rpx;
          transition: width 0.1s;
        }
        
        .slider-btn {
          position: absolute;
          left: 0;
          top: 0;
          width: 80rpx;
          height: 80rpx;
          background: linear-gradient(to right, #6a11cb, #2575fc);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 2;
          box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
        }
        
        .slider-text {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          line-height: 80rpx;
          text-align: center;
          color: #666;
          font-size: 28rpx;
          transition: opacity 0.3s;
        }
      }
    }
  }
}
</style>